<template>
  <div id="biye3">
    <div class="step-one">
      <div class="s-title">毕业要求对毕业目标的支撑</div>
      <div class="s-content">
        <div>
          <el-icon class="green">
            <CircleCheckFilled />
          </el-icon>
          支撑
        </div>
        <div>
          <div class="no-check"></div>
          不支撑
        </div>
      </div>
      <el-table
        :data="rows"
        border
        style="width: 100%"
        :span-method="objectSpanMethod"
        ref="tableRef"
        class="my-table"
      >
        <!-- 毕业要求信息 -->
        <el-table-column
          label="毕业要求"
          width="300"
        >
          <template #default="scope">
            <div><strong>要求{{ scope.$index+1 }} {{ scope.row.requirement.name }}</strong></div>
          </template>
        </el-table-column>

        <!-- 动态列：每个培养目标一列 -->
        <el-table-column
          v-for="(goal, index) in goals"
          :key="goal.id"
          :label="goal.name"
          align="center"
        >
          <template #default="{ row }">
            <div
              v-if="row.checks[index]"
              class="green-box"
              @click="editRow(row,index)"
            >
              <el-icon class="green">
                <CircleCheckFilled />
              </el-icon>
            </div>
            <div
              v-else
              class="no-check"
              @click="editRow(row,index)"
            >
              <div></div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
  
  <script>
export default {
  components: {},
  data() {
    return {
      radio1: 1,
      editTwo: false,
      twoMessage:
        "培养系统地掌握数学、自然科学基础知识和计算机科学与技术专业基础知识，具备较坚实的理论基础，获得计算加专业良好的科学思维和系统的工程训练，具备良好的分析问题解决问题的能力及良好外语运用能力，具有强烈的自主学习意识和创新意识，科学型和工程型相结合的计算机专业高级人才。",
      tableData: [],
      rows: [],
      goals: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //获取
    getList() {
      const url = "/tes/graduation/goal-requirements";
      this.loadingTarget = true;
      this.$axios
        .get(url)
        .then((response) => {
          const res = response.data;
          this.tableData = res;
          this.rows = res.rows;
          this.goals = res.goals;
        })
        .finally(() => {});
    },
    editRow(row, index) {
      const goalId = this.goals[index].id;
      const requirementsId = row.requirement.id;
      const url = `/tes/graduation/goal-requirements?goalId=${goalId}&requirementsId=${requirementsId}`;
      this.$axios
        .post(url)
        .then((response) => {
          const res = response;
          this.$message.success(res.message || "修改成功");
          this.getList();
        })
        .finally(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
#biye3 {
  background: #ffffff;
  box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
  border-radius: 10px;
  border: 1px solid #ffffff;
  padding: 26px;
  box-sizing: border-box;
  .s-right {
    display: flex;
    justify-content: flex-end;
    .el-icon {
      font-size: 20px;
    }
  }
  .s-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: #457aff;
    border-radius: 4px;
    font-size: 14px;
    color: #ffffff;
    padding: 9px 15px;
    cursor: pointer;
    &:hover {
      background: #3a68c7;
    }
  }

  .my-table {
    :deep(table) {
      th,
      td {
        padding: 2px;
        text-align: center;
        border: 0;
      }
      th {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        .cell {
          height: 71px;
          line-height: 71px;
          background: #a6b4ec;
          margin-bottom: 4px;
        }
      }
      td {
        .cell {
          height: 44px;
          line-height: 44px;
          background: #f6f9ff;
          display: flex;
          justify-content: center;
          align-items: center;
          .green-box {
            width: 100%;
            cursor: pointer;
            &:hover {
              background: #e6e9f2;
            }
            .green {
              font-size: 20px;
              color: #48c978;
              transform: translateY(4px);
            }
          }
          .red {
            font-size: 20px;
            color: #ff6666;
          }
          .no-check {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            &:hover {
              background: #e6e9f2;
            }
            > div {
              width: 16px;
              height: 16px;
              background: #c8cee3;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
  .step-one {
    margin-bottom: 37px;
    .s-title {
      font-size: 16px;
      color: #1e2c48;
      margin-bottom: 15px;
    }
    .s-content {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: #71778f;
      line-height: 24px;
      margin-bottom: 35px;
      > div {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #1e2c48;
        .green {
          font-size: 20px;
          color: #48c978;
        }
        .no-check {
          width: 16px;
          height: 16px;
          background: #c8cee3;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>